<template>
	<div class="appSwiper">
		<div class="swiper-container" id="swiper">
	        <div class="swiper-wrapper">
	          <div class="swiper-slide" v-for="item in swiperList">
	            <div class="item"><img :src="item.image"></div>
	          </div>
	        </div>
	        <div class="swiper-pagination"></div>
        </div>
	</div>
</template>
<script type="text/javascript">
	import Swiper from '../../static/js/swiper.min.js';
	export default{
		name:"appSwiper",
		data(){
			return {
				swiperList:[]
			}
		},
		mounted(){
			this.getMachinelist();
		},
		methods:{
			swiperFn(){
				var mySwiper = new Swiper('.appSwiper .swiper-container', {
			      direction: 'horizontal',
			      pagination : '.swiper-pagination',
			      paginationClickable: true,
			      loop: true,
			      autoplay : 5000,
			    });
			},
			getMachinelist(){
		        this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/app/banner`,{
		        	params:{
		        		page:1,
		        		moc:'H5',
		        	}
		        }).then((response) => {
		              console.log(response)
		              this.swiperList = response.data;
		  		 }).then(() => {
		  		 	this.swiperFn()
		  		 })
		    },
		}
	}
</script>
<style lang="less" scoped>
	@import '../assets/css/variables.less';
	@import '../assets/css/swiper.min.css';
	.appSwiper{
		width:@width;
		.item{
			width:@width;
			img{
				width:@width;
			}
		}
	}
	
</style>